<!--
 * @description: 
 * @Author: Islands
 * @Date: 2024-06-18 21:12:23
 * @LastEditTime: 2024-06-21 22:06:43
-->
<script lang="ts" setup>
import { nextTick, ref, watch } from 'vue';
import { props, Emits, ITabs } from './props';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
const { activeTab, blackPath, noDeletePath, tabList, tabsHeight, contentId } = defineProps(props);
const emit = defineEmits<Emits>();
//添加选项卡方法
const addTab = () => {
    //从当前路由获取path和title
    const { path, meta } = route;
    if (!blackPath.includes(path)) {
        //通过vuex设置
        const tab: ITabs = {
            path: path,
            title: meta.title as string,
            icon: meta.icon as string
        };
        emit('addTab', tab);
    }
};
//监听路由
watch(
    () => route.path,
    () => {
        //设置激活的选项卡
        if (!blackPath.includes(route.path)) {
            emit('setActiveTab', route.path);
            addTab();
        }        
    }
);

//选项卡左键点击事件;跳转路径
const handleClick = (event: any) => {
    router.push({ path: event.props.name });
};

/**
 * 单个移除事件
 * @param targetName
 */
const removeTab = (targetName: any) => {
    if (noDeletePath == targetName) return;
    if (activeTab === targetName) {
        tabList.forEach((tab: ITabs, index: number) => {
            if (tab.path === targetName) {
                const nextTab = tabList[index + 1] || tabList[index - 1];
                if (nextTab) {
                    emit('setActiveTab', nextTab.path);
                }
            }
        });
    }
    emit('removeTabList', targetName, function (index: any) {
        let newTabs = tabList[index];
        router.push(newTabs.path);
    });
};

///-============

/**
 * 右键点击事件
 */
const visible = ref<boolean>(false);
const closeVisible = () => {
    visible.value = false;
};
const left = ref('');
const top = ref('');
/**
 * 右键点击触发事件
 */
const openRightChange = (e: any) => {
    if (e.srcElement.id) {
        let currentContextTabId = e.srcElement.id.split('-')[1];
        left.value = e.clientX;
        top.value = e.clientY + 10;
        visible.value = true;
        emit('setContextTabId', currentContextTabId);
    }
};

//关闭所有
const closeAllTabs = () => {
    emit('closeAllTabs');
    router.push(noDeletePath);
};
//关闭其他，左边，右边
const closeOtherTabs = (_par: string) => {
    router.push(contentId);
};
//刷新
const refresh = (view: any) => {
    nextTick(() => {
        router.replace({ path: view }).catch(err => {
            console.warn(err);
        });
    });
};
/**
 * 监听右键点击后列表是否关闭状态
 */
watch(
    () => visible.value,
    () => {
        if (visible.value) {
            window.addEventListener('click', () => closeVisible());
        } else {
            //此处是为了不必要的资源浪费
            window.removeEventListener('click', () => closeVisible());
        }
    }
);
</script>
<template>
    <div class="tags-views">
        <el-tabs type="card" v-model="activeTab" editable @tab-click="handleClick" @tab-remove="removeTab" @contextmenu.prevent.native="openRightChange($event)" :style="{ '--ep-tabs-header-height': tabsHeight + 'px' }">
            <el-tab-pane v-for="item in tabList" :key="item.path" :label="item.title" :name="item.path">
                <template #label>
                    <i :class="`iconfont icon-` + item.icon" />
                    {{ item.title }}
                </template>
            </el-tab-pane>
        </el-tabs>
    </div>

    <ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="tags-view__menu">
        <li @click="refresh(contentId)">
            <svg-icon icon="refresh" />
            刷新
        </li>
        <li @click="removeTab(contentId)">
            <svg-icon icon="close" />
            关闭
        </li>
        <li @click="closeOtherTabs('other')">
            <svg-icon icon="close_other" />
            关闭其它
        </li>
        <li @click="closeOtherTabs('left')">
            <svg-icon icon="close_left" />
            关闭左侧
        </li>
        <li @click="closeOtherTabs('right')">
            <svg-icon icon="close_right" />
            关闭右侧
        </li>
        <li @click="closeAllTabs">
            <svg-icon icon="close_all" />
            关闭所有
        </li>
    </ul>
</template>
<style lang="scss" scoped>
.tags-views {
    box-shadow: 0 1px 3px #0000001f, 0 0 3px #0000000a;
}
//文本样式
:deep(.ep-tabs__item) {
    text-align: center !important;
    margin-right: 5px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-color: #0000001f;
    gap: 3px;
    // color:var(--ep-color-primary)
}
//去除tabs边框
:deep(.ep-tabs__nav) {
    border: none !important;
}
:deep(.ep-tabs--card > .ep-tabs__header) {
    border: none !important;
    margin: 0 0 1px;
    .ep-tabs__item {
        border: none;
    }
}
//去除tabs 增加按钮
:deep(.ep-tabs__new-tab) {
    display: none;
}
//隐藏tabs主内容区域
:deep(.ep-tabs__content) {
    display: none !important;
}
:deep(.ep-tabs__item:hover) {
    background-color: var(--ep-color-hover-primary);
    border: 1px solid var(--ep-color-primary);
}
:deep(.is-active) {
    background-color: var(--ep-color-hover-primary);
    border: 1px solid var(--ep-color-primary);
    transition: 0.3s all;
}

.tags-view__menu {
    margin: 0;
    background: #fff;
    z-index: 3000;
    position: absolute;
    list-style-type: none;
    padding: 5px 0;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    color: #333;
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);

    li {
        margin: 0;
        padding: 7px 16px;
        cursor: pointer;

        &:hover {
            background: #eee;
        }
    }
}
</style>
